<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>搜索</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/css/main.css">
    <script src="/js/jquery-2.1.4.min.js"></script>
    <style>
        .s-ipt {
            display: inline-block;
            position: relative;
            height: 32px;
            width: 450px;
            font: 16px/18px arial;
            line-height: 22px;
            margin: 6px 0 0 7px;
            padding: 0;
            background: transparent;
            border: 0;
            outline: 0;
            -webkit-appearance: none;
            box-sizing: border-box;
            border: 1px solid #f1f1f1;
        }
        .s-ipt:focus{
            border:1px solid #2d78f4;
        }

        .s-btn {
            background: #3385ff;
            padding: 6px 16px;
            color: white;
            border-bottom: 1px solid #2d78f4;
            font-size: 16px;
            border-radius: 2px;
            text-align: center;
            word-spacing: normal;
            text-transform: none;
            text-indent: 0px;
            text-shadow: none;
            width: auto;height: auto;border-bottom: 1px solid transparent;
            cursor: pointer;
            position: relative;
            top: -2px;
            left: -5px;
        }
        .s-type{
            height: 40px;
            font-size: 14px;
            margin: 10px 50px 10px 0;
            background: -webkit-linear-gradient(top, rgba(100,100,100,0.15),rgba(100,100,100,0.1));
        }
        .s-type>ul{
            display: -webkit-box;
        }
        .s-type>ul>li{
            height: 100%;
            width:100px;
            color: #666;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
        }
        .s-type>ul>li.active{
            font-weight: 700;
            border-bottom: 2px solid #2d78f4;
        }
        .flow-default li{
            width:200px;
            height: 200px;
            border:1px solid;
        }
        .card-body:hover{
            cursor: pointer;
        }
        .card-center{
            display: flex;flex-direction: row; font-size: 14px;
        }
        .card-title{
            width: 65%; padding: 5px 30px 5px 10px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
        }
        .card-course{
            width: 35%;  padding: 5px 30px 5px 10px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; color:#ff8000;font-weight: bold
        }
        .card-footer{
            display: flex; flex-direction: row; padding: 3px 5px 3px 10px;
        }
        .card-footer img{
            width: 30px; height: 30px; border-radius: 50%
        }
        .card-footer span{
            font-size: 15px; line-height: 30px; margin-left: 10px;
        }
    </style>
</head>
<body class="lay-blog">
<div th:include="/teacher/templates::header"></div>
<div class="container-wrap" style="background-color: white;">
    <div class="container" id="search" style="width:1000px;">
        <div class="search-form" style="padding: 20px;">
            <div class="s-input">
                <input type="text" class="s-ipt" v-model="text" @keyup.enter="init()">
                <span class="s-btn" style="" @click="init()">
                    搜 索
                </span>
            </div>
            <div class="s-type">
                <ul>
                    <li><a :href="'/teacher/search.html?key='+text">文章</a></li>
                    <li class="active">视频</li>
                    <li><a :href="'/teacher/searchUser.html?key='+text">用户</a></li>
                </ul>
            </div>
        </div>
        <div class="search-result">
            <div class="video" id="video">
                <div class="layui-card" style="width: 32%; float: left;margin: 5px;" v-for="v in videos">
                    <div class="layui-card-body card-body">
                        <a :href="'/teacher/video/detail.html?id='+v.id">
                            <img :src="v.coverImg" style="width:100%; height: 240px;" />
                        </a>
                    </div>
                    <div class="card-center">
                        <div class="card-title">{{v.title}}</div>
                        <div class="card-course">{{v.course.name}}</div>
                    </div>
                    <div class="card-footer">
                        <img src="/upload/user/images/me.jpg" />
                        <span>admin</span>
                    </div>
                </div>
                <div style="clear: both;"></div>
            </div>
        </div>
        <div id="article_items"></div>
    </div>
</div>

<div th:include="/teacher/templates::footer"></div>
<script src="/layui/layui.js"></script>
<script src="/vue/vue.js"></script>
<script>
    // 参数
    var key = '';
    if(document.location.href.indexOf("?")!=-1){
        var param = document.location.href.split('?')[1];
        key = param.split('=')[1];
    }

    // page=1
    Search = new Vue({
        el: '#search',
        data: {
            text: key,
            videos: [],
            totalCount: 0,  //请求后的值
            pageNumber: 0,  // 使用ajax异步刷新，页面初始值为1
            pageSize: 6,
            laypage:{}
        },
        methods: {
            init(){
                this.pageNumber = 0;
                this.pageSize = 6;
                if(this.text==''){
                    return;
                }
                $.ajax({
                    url: '/api/search/video',
                    type: 'get',
                    data: {
                        page: this.pageNumber,
                        size: this.pageSize,
                        key:this.text
                    },
                    success: (res) => {
                        this.videos = res.data.content;
                        this.totalCount = res.data.totalElements;
                        this.laypage.render({
                            elem: 'article_items', //注意，这里的 test1 是 ID，不用加 # 号
                            count: this.totalCount, //数据总数，从服务端得到
                            limit: this.pageSize,
                            theme: '#1e9fff',
                            jump:function (obj, first) {
                                if(!first){
                                    // obj需要跳转的页面参数
                                    Search.jump(obj.curr);
                                }
                            }
                        });
                    }
                })
            },
            jump:function (page) {
                $.ajax({
                    url: '/api/search/video',
                    type: 'get',
                    data: {
                        page: page - 1,  //
                        size: this.pageSize,
                        key:this.text
                    },
                    success: (res) => {
                        this.videos = res.data.content;
                        this.totalCount = res.data.totalElements;
                    }
                })
            }
        }
    });

    layui.use('laypage', function () {
        var laypage = layui.laypage;
        Search.laypage = laypage
        Search.init()
    });



</script>
</body>
</html>